<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>列表组</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <!-- 列表组基本样式 -->
            <ul class="list-group">
                  <li class="list-group-item">列表选项一</li>
                  <li class="list-group-item">列表选项二</li>
                  <li class="list-group-item">列表选项三</li>
            </ul>

            <!-- active 激活列表 -->
            <ul class="list-group">
                  <li class="list-group-item active">列表选项一</li>
                  <li class="list-group-item">列表选项二</li>
                  <li class="list-group-item">列表选项三</li>
            </ul>

            <!-- disabled 禁用列表 -->
            <ul class="list-group">
                  <li class="list-group-item disabled">列表选项一</li>
                  <li class="list-group-item">列表选项二</li>
                  <li class="list-group-item">列表选项三</li>
            </ul>

            <!-- 链接列表组 -->
            <div class="list-group">
                  <a class="list-group-item list-group-item-action" href="#">列表链接1</a>
                  <a class="list-group-item list-group-item-action" href="#">列表链接2</a>
                  <a class="list-group-item list-group-item-action" href="#">列表链接3</a>
            </div>

            <!-- 无边框列表 -->
            <ul class="list-group list-group-flush">
                  <li class="list-group-item">无边框列表1</li>
                  <li class="list-group-item">无边框列表2</li>
                  <li class="list-group-item">无边框列表3</li>
            </ul>

            <!-- 水平列表 -->
            <ul class="list-group list-group-horizontal">
                  <li class="list-group-item">列表选项一</li>
                  <li class="list-group-item">列表选项二</li>
                  <li class="list-group-item">列表选项三</li>
            </ul>
            
            <!-- 不同颜色的链接列表 -->
            <div class="list-group">
                  <a href="#" class="list-group-item list-group-item-action">激活列表项</a>
                  <a href="#" class="list-group-item list-group-item-success">成功列表项</a>
                  <a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
                  <a href="#" class="list-group-item list-group-item-info">信息列表项</a>
                  <a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
                  <a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
                  <a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
                  <a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
                  <a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
            </div>
      </body>
</html>